{extend name='template/base'}{/extend}
{block name='style'}
<style>
    .tab-content .tab-pane {
        margin: 20px;
    }

    .checkmod {
        border: 1px solid #ebebeb;
    }

    .checkbox input[type=checkbox] {
        margin-left: 10px;
        position: relative;
    }

    .checkmod dt {
        font-weight: bold;
        padding-left: 10px;
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid #ebebeb;
        background-color: #ECECEC;
    }

    .checkmod dd {
        font-weight: normal !important;
        padding-left: 10px;
        line-height: 30px;
    }

    .checkmod dd label {
        font-weight: normal;
    }

    .checkbox, .radio {
        display: inline-block;
        height: 20px;
        line-height: 20px;
    }

    .checkbox input, .radio input {
        margin-right: 5px;
        vertical-align: -1px;
    }

    .checkmod dd .divsion {
        margin-right: 20px;
    }
</style>

{/block}
{block name='content'}
<div>

    <div class="row">
        <div class="box">
            <div class="box-body">
                <form method="POST" id="form" class="form-horizontal" action="{:url('AdminRole/power_update')}">
                    <input type="hidden" id="role_id" name="role_id" value="{$role_id}"/>
                    <input type="hidden" id="rules" name="rules" value="">
                    {volist name="data" id="vo"}
                    <dl class="checkmod">
                        <dt class="hd">
                            <label class="checkbox"><input class="auth_rules rules_all" type="checkbox" {in name="$vo.id" value="$powers_show"}checked {/in} value="{$vo.id}">{$vo.name}</label>
                        </dt>
                        <dd class="bd">
                            {if condition="array_key_exists('children',$vo)"}
                            {volist name="$vo['children']" id='co'}
                            <div class="rule_check">
                                <div>
                                    <label class="checkbox">
                                        <input class="auth_rules rules_row" type="checkbox" {in name="$co.id" value="$powers_show"}checked {/in} value="{$co.id}">{$co.name}
                                    </label>
                                </div>
                                {if condition="array_key_exists('children',$co)"}
                                <ul class="child_row">
                              {volist name="$co['children']" id="fo"}
                              <li class="checkbox">
                                  <input  id="{$fo.id}" name="powers[]" class="auth_rules rules_item" type="checkbox"  {in name="$fo.id" value="$powers_show"}checked {/in}  value="{$fo.id}" >
                                  <label style="padding-left: 0;!important;" for="{$fo.id}">{$fo.name}</label></li>
                               {/volist}
                            </ul>
                                {/if}
                            </div>
                            {/volist}
                            {/if}
                        </dd>
                    </dl>
                    {/volist}
                    <button type="submit" class="btn btn-submit">确 定</button>
                    <button class="save btn btn-return" onclick="javascript:history.back(-1);return false;">返 回</button>
                </form>
            </div>
        </div>
    </div>
</div>
{/block}
{block name='script_extra'}
<script>
    var rules={$rules}?{$rules}:[];
    console.log(rules);

        //删减数组指定元素
        function removeElement(value) {
            for(var i=0; i<rules.length; i++) {
                if(rules[i] == value) {
                    rules.splice(i, 1);
                    break;
                }
            }
        }
        //模块点击事件
        $('.checkmod .hd .rules_all').click(function (e) {
            if(e.target.checked===true){
                $(e.target).parents('.checkmod').find('.auth_rules').each(function () {
                    $(this)[0].checked=true;
                    rules.push($(this)[0].value);
                    $('#rules').val(rules);
                });
                $(e.target).parents('.checkmod').find('.bd .rules_item').each(function () {
//                    rules.push($(this)[0].value);
                })
            }else{
                $(e.target).parents('.checkmod').find('.auth_rules').each(function () {
                    $(this)[0].checked=false;
                    removeElement($(this)[0].value);
                    $('#rules').val(rules);
                });
                $(e.target).parents('.checkmod').find('.bd .rules_item').each(function () {
//                    removeElement($(this)[0].value);
                });
            }
            console.log(rules);
        });
        //控制器点击事件
        $('.checkmod .bd .checkbox .rules_row').click(function (e) {
            if(e.target.checked===true){
                rules.push(e.target.value);
                $(e.target).parents('.rule_check').find('.child_row .auth_rules').each(function () {
                    $(this)[0].checked=true;
                    rules.push($(this)[0].value);
                    $('#rules').val(rules);
                })
            }else{
                $(e.target).parents('.rule_check').find('.child_row .auth_rules').each(function () {
                    $(this)[0].checked=false;
                    removeElement($(this)[0].value);
                    $('#rules').val(rules);
                });
                removeElement(e.target.value);
                $('#rules').val(rules);
            }

            var input=e.target.parentNode.parentNode.parentNode.parentNode.getElementsByTagName('input');
            var num=0;
            for(var i=0;i<input.length;i++) {
                if(input[i].checked===true) {
                    num++;
                }
            }
            if(num==input.length){
                e.target.parentNode.parentNode.parentNode.parentNode.parentNode.getElementsByClassName('rules_all')[0].checked=true;
                rules.push(e.target.parentNode.parentNode.parentNode.parentNode.parentNode.getElementsByClassName('rules_all')[0].value);
                $('#rules').val(rules);
            }else{
                e.target.parentNode.parentNode.parentNode.parentNode.parentNode.getElementsByClassName('rules_all')[0].checked=false;
     
                removeElement(e.target.parentNode.parentNode.parentNode.parentNode.parentNode.getElementsByClassName('rules_all')[0].value);
                $('#rules').val(rules);
            }
            console.log(rules);
        });
        //方法点击事件
        $('.checkmod .bd .child_row').click(function (e) {
            var rules_row=e.target.parentNode.parentNode;
            var rules_all=rules_row.parentNode.parentNode;
//            console.log(rules_row.parentNode.parentNode.getElementsByTagName('input').length);
            var input_row=rules_row.getElementsByTagName('input');
            var input_all=rules_all.getElementsByTagName('input');
            //判断控制器级
            var num_row=0;
            for(var i=0;i<input_row.length;i++) {
                if(input_row[i].checked===true) {
                    num_row++;
                }
            }
            if(num_row==e.currentTarget.childElementCount){
                e.currentTarget.parentNode.getElementsByClassName('rules_row')[0].checked=true;
                console.log(e.currentTarget.parentNode.getElementsByClassName('rules_row')[0].value)
                rules.push(e.currentTarget.parentNode.getElementsByClassName('rules_row')[0].value);
                $('#rules').val(rules);
            }else{
                e.currentTarget.parentNode.getElementsByClassName('rules_row')[0].checked=false;
                e.currentTarget.parentNode.parentNode.parentNode.getElementsByClassName('rules_all')[0].checked=false;
                removeElement(e.currentTarget.parentNode.getElementsByClassName('rules_row')[0].value);
                removeElement(e.currentTarget.parentNode.parentNode.parentNode.getElementsByClassName('rules_all')[0].value);
                $('#rules').val(rules);

            }
            //判断模块级
            var num_all=0;
            for(var j=0;j<input_all.length;j++) {
                if(input_all[j].checked===true) {
                    num_all++;
                }
            }
            if(num_all==input_all.length){
                e.currentTarget.parentNode.parentNode.parentNode.getElementsByClassName('rules_all')[0].checked=true;
                rules.push(e.target.parentNode.parentNode.parentNode.parentNode.parentNode.getElementsByClassName('rules_all')[0].value);
                $('#rules').val(rules);
            }else{
                e.currentTarget.parentNode.parentNode.parentNode.getElementsByClassName('rules_all')[0].checked=false;
                removeElement(e.currentTarget.parentNode.parentNode.parentNode.getElementsByClassName('rules_all')[0].value);
                $('#rules').val(rules);
            }
            if(e.target.checked===true){
                rules.push(e.target.value);
                $('#rules').val(rules);
            }else {
                removeElement(e.target.value);
                $('#rules').val(rules);
            }
            console.log(rules);
        });

    $("#form").Validform({
        tiptype:2,
        showAllError:true,
        ajaxPost:true,
        callback: function (res) {
            if (res.success == true){
                layer.msg(res.message, {time: 1000},function () {
                    layer_close();
                    parent.$('#table').bootstrapTable('refresh');
                });
            }else{
                layer.alert(res.message);
            }
        }
    });



//    $('.btn-submit').click(function(){
//        $.ajax({
//            dataType:'json',
//            data:{id:$('#role_id').val(),rules:rules},
//            url:"{:url('AdminRole/power_update')}",
//            success:function(res){
//                if(res.success){
//                    layer.msg(res.message, {time: 1000},function () {
//                        layer_close();
//                        parent.$('#table').bootstrapTable('refresh');
//                    });
//                }else{
//                    layer.alert(res.message,{icon:5})
//                }
//            }
//        })
//    })
</script>
{/block}